<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>帖子列表</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"
          href="../../static/layui/css/layui.css"/>
    <link rel="stylesheet" th:href="@{/styles/home.css}"
          href="../../static/styles/home.css"/>
    <link rel="stylesheet" th:href="@{/styles/articles/index.css}"
          href="../../static/styles/articles/index.css"/>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
          crossorigin="anonymous"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
            crossorigin="anonymous"></script>
    <script
            src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
            integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <!-- 头部导航栏 end -->
    <div th:replace="/share/_header :: header(2)"></div>

    <div class="layui-body body-content">
        <!-- 内容主体区域 -->
        <div role="main" class="container" style="margin-top: 1rem;">
            <div class="row">
                <div class="col-sm-9 blog-main">
                    <div class="blog-post" th:each="post : ${posts}">
                        <img src="http://via.placeholder.com/60x60" class="rounded-circle" alt="${post.user.username}">
                        <div class="blog-intro">
                            <p class="font-weight-bold">
                                <a th:href="${'/posts/' + post.id}">[[${post.title}]]</a>
                            </p>
                            <p class="blog-post-meta">
                                January 1, 2014 by <a href="#">[[${post.user.username}]]</a>
                            </p>

                            <div class="blog-post-action">
                                <a><i class="layui-icon">&#xe6c6;</i> 123</a>
                                <a><i class="layui-icon">&#xe6c6;</i> 回复</a>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <nav th:replace="/share/_pagination :: pagination(${totalCount}, ${totalPage}, ${curPage}, ${curSize}, '/posts')"></nav>
                </div>
                <!-- /.blog-main -->

                <aside class="col-sm-3 ml-sm-auto blog-sidebar" style="padding-top: 1rem;">
                    <div class="sidebar-module" style="padding: 1rem 0;">
                        <a href="/articles/write" style="width: 100%;" class="btn btn-secondary btn-lg" role="button"
                           aria-pressed="true">
                            <i class="layui-icon" style="font-size: 25px;">&#xe654;</i>发布新文章
                        </a>
                    </div>
                    <div class="sidebar-module sidebar-module-inset">
                        <h4>About</h4>
                        <p>
                            Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras
                            mattis consectetur purus sit amet fermentum. Aenean lacinia
                            bibendum nulla sed consectetur.
                        </p>
                    </div>
                    <div class="sidebar-module">
                        <h4>Archives</h4>
                        <ol class="list-unstyled">
                            <li><a href="#">March 2014</a></li>
                            <li><a href="#">February 2014</a></li>
                            <li><a href="#">January 2014</a></li>
                            <li><a href="#">December 2013</a></li>
                            <li><a href="#">November 2013</a></li>
                            <li><a href="#">October 2013</a></li>
                            <li><a href="#">September 2013</a></li>
                            <li><a href="#">August 2013</a></li>
                            <li><a href="#">July 2013</a></li>
                            <li><a href="#">June 2013</a></li>
                            <li><a href="#">May 2013</a></li>
                            <li><a href="#">April 2013</a></li>
                        </ol>
                    </div>
                    <div class="sidebar-module">
                        <h4>Elsewhere</h4>
                        <ol class="list-unstyled">
                            <li><a href="#">GitHub</a></li>
                            <li><a href="#">Twitter</a></li>
                            <li><a href="#">Facebook</a></li>
                        </ol>
                    </div>
                </aside>
                <!-- /.blog-sidebar -->
            </div>
            <!-- /.row -->
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}" src="../../static/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    //JavaScript代码区域
    layui.use(['element'], function () {
        var element = layui.element;
    });
</script>
</body>
</html>